<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>板块管理</title>
    <link rel='stylesheet' href='<%- rootUrl %>/node_modules/font-awesome/css/font-awesome.min.css' />
    <link rel='stylesheet' href='<%- rootUrl %>/res/adapter.css' />
    <link rel='stylesheet' href='<%- rootUrl %>/res/htree.css' />
    <style>
        #site-block {border:1px solid gainsboro; padding:6px}
        #site-block .htree-node {border-top:1px solid gainsboro}
        #site-block > .htree-node:first-child {border-top:none}
        #site-block .htree-node > input[type=text] {cursor:pointer}
        #site-block .htree-node > div {font-size:small;padding:0 12px;border-left:1px solid gainsboro;color:lightgrey}
    </style>
    <script src="<%- rootUrl %>/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="<%- rootUrl %>/res/adapter.js"></script>
    <script src="<%- rootUrl %>/res/htree.js"></script>
</head>
<body class="body-margin-800">
<alljs-widget><message-top><%- message %></message-top><blocksdic><%- blocksDic %></blocksdic></alljs-widget>
<div class="width-limit">
    <h3>管理站点板块</h3>
    <button id="addRootBtn" style="margin:6px"><i class="fa fa-plus"></i>&nbsp;添加根板块</button>
    <div id="site-block" class="htree-root"></div>
    <br/>
    <button id="saveBlocks" style="margin:6px"><i class="fa fa-save"></i>&nbsp;保存配置</button>
</div>
<script>
    function inverse_key_val(obj){
        let obj_tgt = {};
        for (let key in obj){
            if (key !== undefined){
                obj_tgt[obj[key]] = key;
            }
        }
        return obj_tgt;
    }

    $(function(){
        setTimeout(function(){
            // 经典树目录
            let icons = [ '<i class="fa fa-globe"></i>', '<i class="fa fa-sitemap"></i>', '<i class="fa fa-folder-o"></i>', '<i class="fa fa-file-o"></i>', '<i class="fa fa-th-large"></i>' ];
            let tree = new HTree({
                newNodeText:'新版块',
                checkbox:true,
                checkboxRecursive:true,
                beforeAdd: (e) => {
                    let level = e.tree.getLevel(e.parentList);
                    if (level>4) {
                        showMessage('最大 5 级');
                        return false;
                    }
                    e.tree.option.icon = icons[e.tree.getLevel(e.parentList)];
                },
                afterAdd: (e) => {
                    let namepath = e.tree.getPath(e.newNode);
                    let input = e.newNode.children('input[type=text]:first');
                    if (namepath in window.namesdic){
                        input.after('<div class="path">'+window.namesdic[namepath]+'</div>');
                        return;
                    }
                    let pos = namepath.lastIndexOf('/');
                    let basepath = pos < 0 ? '' : window.namesdic[namepath.substring(0, pos)] + '/';
                    let nodename = input.val();
                    input.after('<input type="text" value="'+nodename+'" />').after('<div class="path">'+basepath+'</div>');
                    e.newNode.children('input[type=text]:last').select().keydown(function(e){ if (e.which === 13)$(this).blur() }).blur(function(){
                        let subpath = $(this).val();
                        if (subpath === '')
                            subpath = nodename;
                        window.namesdic[namepath] = basepath + subpath;
                        e.newNode.children('.path:first').text(window.namesdic[namepath]);
                        $(this).remove();
                    });
                },
                // 删除确认
                beforeDelete: (e) => { return confirm("是否确认删除"); }
            });
            let treeNode = $('#site-block');

            window.blocksdic = JSON.parse(window.blocksdic)
            window.namesdic = inverse_key_val(window.blocksdic);
            let names = [];
            for (let key in window.namesdic)
                names.push(key);

            tree.createByPaths(treeNode, names);

            $('#addRootBtn').click(function(){ tree.appendChild(treeNode) });

            $('#saveBlocks').click(function(){
                let blocks_out = [];
                for (let key in window.namesdic) {
                    let pos = key.lastIndexOf('/');
                    let name = pos < 0 ? key : key.substr(pos+1)
                    blocks_out.push({path:window.namesdic[key], name});
                }
                blocks_out.sort((p1,p2)=>(p1.path>p2.path ? 1 : -1));
                postRequest('./saveblock', {blocks : JSON.stringify(blocks_out)});
            });
        }, 500);
    });
</script>
</body>
</html>